<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro de Notícias - Unidade 4</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="col-md-6 bg-white p-4 rounded shadow-sm">
                <h3 class="mb-4">Publicar Nova Matéria</h3>
                
                <form id="form-noticia" novalidate>
                    <div class="mb-3">
                        <label for="titulo" class="form-label">Título da Notícia</label>
                        <input id="titulo" type="text" class="form-control" required>
                        <div class="invalid-feedback">Por favor, insira um título válido.</div>
                    </div>

                    <div class="mb-3">
                        <label for="categoria" class="form-label">Categoria</label>
                        <select id="categoria" class="form-select" required>
                            <option value="">Selecione...</option>
                            <option value="Tecnologia">Tecnologia</option>
                            <option value="Desenvolvimento">Desenvolvimento</option>
                            <option value="Design UX">Design UX</option>
                        </select>
                        <div class="invalid-feedback">Selecione uma categoria técnica.</div>
                    </div>

                    <div class="mb-3">
                        <label for="resumo" class="form-label">Resumo</label>
                        <textarea id="resumo" class="form-control" rows="3" required></textarea>
                        <div class="invalid-feedback">O resumo é obrigatório.</div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100" id="btn-enviar">
                        Enviar para o Servidor
                    </button>
                </form>

                <div id="status-envio" class="mt-3"></div>
            </div>
        </div>
    </div>
</body>
</html>